<!--
 * @author: 十一
 * @since: 2024-06-19
 * index.vue
 * @desc: new page
-->
<template>
  <a-row :gutter="15">
    <a-col
      :xxl="{ span: 3 }"
      :xl="{ span: 3 }"
      :lg="{ span: 4 }"
      :md="{ span: 5 }"
      :sm="{ span: 6 }"
      :xs="{ span: 8 }"
    >
      <div class="classify-group">
        <div
          class="classify-item"
          v-for="item in classificationList"
          :key="item.id"
          @mouseover="handleMouseover(item)"
          @mouseout="handleMouseout(item)"
          :class="{ 'hover-class': item.isHovering }"
          @click="handleClick(item)"
        >
          <div>{{ item.title }}</div>
        </div>
      </div>
    </a-col>
    <a-col
      :xxl="{ span: 21 }"
      :xl="{ span: 21 }"
      :lg="{ span: 20 }"
      :md="{ span: 19 }"
      :sm="{ span: 18 }"
      :xs="{ span: 16 }"
    >
      <div class="resource-content">
        <a-card style="border: none" v-for="item in classificationList" class="mb-5" :id="item.id">
          <div class="mb-5 flex items-center">
            <a-divider type="vertical" style="border-width: 2px; border-color: #30e4c4" />

            <span class="font-medium text-base"> {{ item.title }}</span>
            <span class="ml-5 text-xs text-gray-500"> {{ item.description }}</span>
          </div>
          <a-row :gutter="15">
            <a-col
              :xxl="{ span: 6 }"
              :xl="{ span: 6 }"
              :lg="{ span: 8 }"
              :md="{ span: 8 }"
              :sm="{ span: 12 }"
              :xs="{ span: 24 }"
              v-for="children in item.resourceList"
              :key="children.id"
              style="border: none"
            >
              <a class="children-card-content" :href="children.link" target="_blank">
                <a-card
                  :style="{ background: children.background }"
                  class="mb-1 children-card"
                  @mouseover="handleMouseover(children)"
                  @mouseout="handleMouseout(children)"
                  @click="postClickCountApi({id: children.id})"
                  :class="{ 'hover-resource-class': children.isHovering }"
                >
                  <img :src="children.thumbnail" alt="" />
                </a-card>

                <div class="title" style="display: flex;align-items: center;justify-content: space-between;">
                  <div>{{ children.title }}</div>
                  <div class="description" v-if="children.clickNumber">点击量：{{ children.clickNumber }}</div>
                </div>
                <div class="description mb-5">
                  <a-tooltip placement="top" :content="children.description">
                    {{ children.description }}
                  </a-tooltip>
                </div>
              </a>
            </a-col>
          </a-row>
        </a-card>
      </div>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { getClassificationList, getResourceList,postClickCountApi } from '@/servers/main'
let classificationList = ref([])

let route = useRoute()
const getdata = async () => {
  // 获取分类列表
  let classificationListResponse = await getClassificationList({parentIds: "1960151510432260098" })
  classificationList.value = classificationListResponse.result.records


  // 获取资源列表
  let resourceListResponse = await getResourceList({
    pageNo:"1",
    pageSize:"1000",
  })
  classificationList.value.forEach((item: any) => {
    item.isHovering = false
    item.resourceList = resourceListResponse.result.records.filter((resourceItem: any) => {
      if (resourceItem.classifyId == item.id) {
        resourceItem.isHovering = false
        resourceItem.background = getRandomGradientStyle()
        return resourceItem
      }
    })
  })
}
getdata()

const handleMouseover = (item: any) => {
  item.isHovering = true
}
const handleMouseout = (item: any) => {
  item.isHovering = false
}

const handleClick = (item: any) => {
  let anchorEl: any = document.getElementById(item.id)
  console.log(anchorEl)
  anchorEl.scrollIntoView({ behavior: 'smooth' })
}

function getRandomColor() {
  const letters = '0123456789ABCDEF'
  let color = '#'
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)]
  }
  return color
}

function getRandomGradientStyle() {
  const color1 = getRandomColor()
  const color2 = getRandomColor()
  return `linear-gradient(to right, ${color1}, ${color2})`
}
</script>

<style lang="less" scoped>
.classify-group {
  background: #ffffff;
  border-radius: 10px;
  .classify-item {
    line-height: 60px;
    text-align: center;
    border-bottom: 1px solid #f1f3f7;
    font-size: 14px;
    color: #999999;
    cursor: pointer;
  }
}
.hover-class {
  text-decoration: none;
  font-size: 16px;
  color: #000000;
  background-repeat: no-repeat;
  background-position: center 78px;
  box-shadow: 0 30px 28px -18px rgba(0, 0, 0, 0.26);
  transform: translate(0, -4px);
  transition: 0.5s;
  font-size: 18px !important;
  color: #30e4c4 !important;
}

.resource-content {
  height: calc(100vh - 170px);
  overflow-y: scroll;
  cursor: pointer;
  .title {
    color: #171717;
  }
  .description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #bcbcbc;
    font-size: 12px;
  }
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.children-card {
  border: none;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .children-card-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  img {
    width: 50px;
    border-radius: 10px;
  }
}
.hover-resource-class {
  background-repeat: no-repeat;
  background-position: center 78px;
  box-shadow: 0 30px 28px -18px rgba(0, 0, 0, 0.26);
  transform: translate(0, -4px);
  transition: 0.5s;
  img {
    transform: rotate(30deg);
    transition: 0.5s;
  }
}
</style>
